<template>
  <div class="user">
    <!-- <span class="share"></span> -->
    <div class="share animated " :class="{bounceIn:share,fadeOutUp:!share}"  @click.passive="share=false">
    </div>
    <article class="no-select"><Voteleave ref="votesNumber"/></article>
    <Voteinfo v-if="user"  :personlist='user'/> 
    <header>
      <span class="lf"></span>
       <Drag v-if="imglist" :imglist="imglist" />
      <span class="rt"></span>
    </header>
    <div class="impress-divider"><divider>别人对你的印象是</divider></div>
    <!-- <p class="rank"><span>排名：<b>{{rank}}</b></span><span>票数：<b>{{tiket}}</b></span></p>
     <Userform v-if="user" :user="user" />
     <p>大家对我的印象</p> -->
    <Impress v-if="user" :user="user"/>
    <p  class="btn"><span @click.passive="toPrize"></span><span @click.passive="share=true"></span></p>
  </div>
</template>
<script>
import Voteleave from "@/components/com/Voteleave";
import Drag from '@/components/com/Drag';
import Userform from '@/components/com/Userform';
import Impress from '@/components/com/Impress';
import Voteinfo from '@/components/com/Voteinfo';
import { Divider } from "vux";
import Qs from 'qs'
import {  getServerHost,
  preventMove,
  GetRequest,
  checkMobile,
  checkQq} from '@/assets/lib/tool.js'
import { wxShare } from "@/assets/lib/wxshare.js";
import { Icon } from 'vux'
export default {
  components: { Drag, Userform, Impress, Voteinfo, Divider, Voteleave },
  data() {
    return {
      auditing: true,
      queryInfoMyselfUrl: '/wxjx/goddess/common/user/queryInfoMyself',
      openid: GetRequest().openid,
      user: {
      },
      imglist: [],
      // pathUrlImg: 'http://118.212.184.170/wxjx/file/img',
      pathUrlImg: '',
      rank: '',
      tiket: '',
      share: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getUserInfor();
      setTimeout(() => {
        wxShare();
        this.asyncCount = 5
      }, 500)
    })
  },
  watch: {
    user(val) {
      // console.log(val);

      return val;
    }
  },
  methods: {

    //查看奖品页面
    toPrize(id) {
      this.$router.push({ path: '/prize', query: { openid: this.openid } })
    },

    //获取用户信息
    getUserInfor() {
      var vm = this;
      this.$http.get(getServerHost() + this.queryInfoMyselfUrl, {
        params: {
          openid: this.openid
        }
      }).then(rs => {
        console.log(rs);
        rs = rs.data;
        if ('200' == rs.code) {
          this.user = rs.res;
          vm.rank = rs.res.rank;
          vm.tiket = rs.res.votesNumber;
          if (rs.res.image1Path) {
            vm.imglist.unshift(vm.pathUrlImg + rs.res.image1Path)
          }
          if (rs.res.image2Path) {
            vm.imglist.unshift(vm.pathUrlImg + rs.res.image2Path)
          }
          if (rs.res.image3Path) {
            vm.imglist.unshift(vm.pathUrlImg + rs.res.image3Path)
          } if (rs.res.image4Path) {
            vm.imglist.unshift(vm.pathUrlImg + rs.res.image4Path)
          }
        }

      })
    }
  },
}
</script>
<style lang="less" scoped>
.share {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../../assets/img/share.png") no-repeat;
  background-size: 100% 100%;
  z-index: 999;
}
article {
  position: relative;
  margin: 0 auto;
  width: 640px;
  height: 316px;
  background: url("../../assets/img/title.png") no-repeat;
  background-size: 100% 100%;
  span {
    position: absolute;
    right: 24px;
    bottom: 12px;
    font-size: 36px;
    font-weight: bold;
    color: #f5f296;
  }
}
.impress-divider {
  padding: 0 35px;
}
.user {
  width: 100%;
  min-height: 100%;
  background: #ffe6ec;
  // background: url("../../assets/img/user-bg.png") no-repeat;
  // background-size: 100% 100%;
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .lf {
      position: relative;
      left: 80px;
      width: 39px;
      height: 58px;
      background: url("../../assets/img/lf-icon.png") no-repeat;
      background-size: 100% 100%;
    }
    .rt {
      position: relative;
      right: 80px;
      width: 39px;
      height: 58px;
      background: url("../../assets/img/rt-icon.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .rank {
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    color: #ce1010;
    font-weight: bold;
  }
  .btn {
    padding: 50px 0;
    display: flex;
    justify-content: space-around;
    span:nth-child(1) {
      width: 241px;
      height: 63px;
      background: url("../../assets/img/my-prize.png") no-repeat;
      background-size: 241px 63px;
    }
    span:nth-child(2) {
      width: 241px;
      height: 63px;
      background: url("../../assets/img/share-btn.png") no-repeat;
      background-size: 241px 63px;
    }
  }
}
</style>

